<template>
  <!-- 状态栏占位 -->
  <!-- <view class="status_bar"></view> -->
  <view class="headnav" :style="{backgroundImage: 'url(' + bg + ')',backgroundSize: bgSize}">
    <view
      :style="{ height: store.statusBarHeight + 'px' }"
      class="status-bar"
    ></view>
    <!-- 真正的导航栏内容 ，请按照自己的需求自行定义-->
    <view :style="{ height: store.navBarHeight + 'px' }" class="nav">
      <uni-icons
        v-if="back"
        type="left"
        size="25"
        color="#fff"
        @click="handleRedirect"
      ></uni-icons>
      <image
        v-else
        class="home"
        src="https://ucp-tcg.com:18001/mc/app/static/home.png"
        mode="aspectFit"
        @click="handleRedirect"
      ></image>
      <text class="nav-name">{{ title }}</text>
    </view>
  </view>
</template>
<script setup>
import { useDeviceStore } from '@/stores/modules/deviceStore'
const store = useDeviceStore()

const props = defineProps({
  back: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  bg: {
    type: String,
    default: 'https://ucp-tcg.com:18001/mc/app/static/d_bg.png'
  },
  bgSize: {
    type: String,
    default: 'auto'
  }
})

const handleRedirect = () => {
  if (props.back) {
    uni.navigateBack()
  } else {
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }
}
</script>
<style lang="scss" scoped>
.headnav {
  position: sticky;
  top: 0;
  z-index: 99;
}
// .status-bar {
//   background-color: #252824;
// }

.nav {
  //   background-color: #45463a;
  // background: url('https://ucp-tcg.com:18001/mc/app/static/d_bg.png');
  // background-size: cover;
  color: #fff;
  padding: 0 24rpx;
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
  box-sizing: border-box;

  .nav-name {
    font-size: 28rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .home {
    width: 40rpx;
    height: 40rpx;
  }
}
</style>
